<template>
  <div>
    <el-carousel v-if="coursels" :interval="4000" type="card" height="500px">
      <el-carousel-item v-for="(coursel,index) in coursels" :key="index">
        <h4>{{ coursel.title }}</h4>
        <img class="image" @click="handleClick(coursel.id)" :src="coursel.pic_url" alt="">
      </el-carousel-item>
    </el-carousel>
    <el-row>
      <el-col v-if="chartData1" :span="8" :offset="2">
        <ve-pie :title="charTitle1" :data="chartData1" />
      </el-col>
      <el-col v-if="chartData2" :span="8" :offset="2">
        <ve-funnel :title="charTitle2" :settings="{ascending: true}" :data="chartData2" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCoursels, proxyQuery } from '../api/elasticApi';
import { mapActions } from 'vuex';
import VePie from 'v-charts/lib/pie';
import VeFunnel from 'v-charts/lib/funnel';
import 'echarts/lib/component/title';
import { query1, query2 } from '../common/chart-config';
export default {
  data() {
    return {
      coursels: null,
      chartData1: null,
      chartData2: null,
      charTitle1: { text: '菜谱发布时间分布图', bottom: 0 },
      charTitle2: { text: '粉丝数百分比分布图', bottom: 0, right: 0 }
    };
  },
  created() {
    getCoursels()
      .then(res => {
        if (!res.data.hits.hits) {
          return;
        }
        this.coursels = res.data.hits.hits.map(hit => {
          const id = hit['_id'];
          return { ...hit['_source'], id };
        });
      })
      .catch(err => {
        console.log(err);
      });
    this.getChartData();
  },
  methods: {
    getChartData() {
      proxyQuery(query2)
        .then(res => {
          /**
           * @type {Array} buckets
           */
          const values = res.data.aggregations.per_fans.values;
          const data = [];
          for (const key in values) {
            if (values.hasOwnProperty(key)) {
              const element = values[key];
              data.push({
                百分比: `${key}%`,
                数据: element
              });
            }
          }
          this.chartData2 = {
            columns: ['百分比', '数据'],
            rows: data
          };
        })
        .catch(err => {
          console.log(err);
        });
      proxyQuery(query1)
        .then(res => {
          /**
           * @type {Array} buckets
           */
          const buckets = res.data.aggregations.date_range.buckets;
          const data = buckets.map(bucket => {
            return { 名称: bucket.key, 数量: bucket.doc_count };
          });
          this.chartData1 = {
            columns: ['名称', '数量'],
            rows: data
          };
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleClick(id) {
      this.setCurrentCook(id);
      this.$router.push({ name: 'detail' });
    },
    ...mapActions(['setCurrentCook'])
  },
  name: 'home',
  components: { VePie, VeFunnel }
};
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 500px;
}
</style>
